<template>
	<view>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" bg-color="#f5f5f7"></u-tabs>
		
		<view class="w96 radius20 bgwhite" style="margin-top: 20rpx;" v-for="(item,index) in 10" @click="to('/pages/order/detail')">
			<view class="w96 flex-between" style="border-bottom: 2rpx solid #eee;padding: 20rpx 0rpx;">
				<view style="font-size: 26rpx;">
					<label>订单号：</label>
					<label style="color:#999;">202212230060989673432</label>
				</view>
				<label style="color:#2d80fd">已取消</label>
			</view>
			<view  class="w96" style="padding:20rpx 0rpx;">
				<view class="flex-start" style="width:100%;">
					<view>
						<image src="http://n1.itc.cn/img8/wb/recom/2016/06/24/146674347901435567.PNG" style="width:80rpx;height: 80rpx;border-radius: 10rpx;"></image>
					</view>
					<view style="margin-left: 20rpx;width:70%;">
						<view style="font-weight: bold;font-size: 32rpx;">洗衣机维修</view>
						<view style="font-size: 26rpx;color:#999;margin-top: 20rpx;">预约时间：2022-12-23 09：00</view>
					</view>
					<view style="font-size: 30rpx;color:#999;text-align: right;flex-grow: 1;">
						x1
					</view>
				</view>
			</view>
			<view class="w96 flex-end items-center">
				<label style="font-size: 24rpx;">共1项服务</label>
				<view style="margin-left: 20rpx;">
					<label style="font-size: 30rpx;">合计：</label>
					<label style="color:red;font-size: 26rpx;">￥0.00</label>
				</view>
			</view>
			<view class="w96 flex-end items-center" style="padding:20rpx 0rpx;">
				<view style="padding:8rpx 20rpx;border-radius: 30rpx;text-align: center;color:#2e80fe;border:2rpx solid #2e80fe;font-size: 28rpx;">重新下单</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				list: [{
						name: '全部'
					},
					{
						name: '待接单'
					},
					{
						name: '待上门'
					},
					{
						name: '待评价'
					},
					{
						name: '已取消'
					}
				]
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			to(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style>
</style>